<template>
  <div class="xgybgboxxuehua">

    <div class="lefttoppoint round"></div>
    <div class="leftdownpoint round"></div>
    <div class="righttoppoint round"></div>
    <div class="rightdownpoint round"></div>

    <div class="content">
      <div class="contenttitle">
        <slot name="contenttitle">
        </slot>
      </div>
      <div class="contentbody">
        <slot name="contentbody">
        </slot>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "XgyBgBoxXuehua"

}
</script>

<style lang="less" scoped>
.xgybgboxxuehua {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
  background-color: #19515c;
  border: 0.1rem solid #74d7e2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .lefttoppoint {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
  }
  .round {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-image: url("../../assets/driverhouseimg/xgybgxuehua.png");
    background-repeat: no-repeat;
    background-position: -1.8rem -36px;
  }
  .leftdownpoint {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
  }
  .righttoppoint {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }
  .rightdownpoint {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
  }
  .content {
    display: flex;
    justify-content: center;
    align-content: center;
    .contenttitle {
    }
    .contentbody {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>